<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>The Ajax 01 Page</h1>
    <fieldset>
        <legend>Ajax 异步GET请求</legend>
        <button onclick="doAjaxGet1()">Ajax Get Request</button>
        <span id="result">Data is Loading...</span>
    </fieldset>


</body>

<script>
    //JS中错误的调试：console.log(),断点（debugger）,回调

    function doAjaxGet1() {
       // debugger
        //1、创建XHR对象-ajax应用入口对象
        let xhr=new XMLHttpRequest();
        //2、在xhr对象上注册监听(拿到服务器端响应结果以后更新到页面result位置)
        xhr.onreadystatechange=function () {//事件处理函数
            //readyState==4 表示服务端响应到客户端数据已经接收完成
            if (xhr.readyState==4){
                if (xhr.status==200){//status==200表示请求处理过程没有问题
                    document.getElementById("result").innerHTML=xhr.responseText;
                }
            }
        }

        //3、与服务器建立连接
        xhr.open("GET","http://localhost:8080/doAjaxGet01",true);
        //4、向服务器端发送请求
        xhr.send(null);//get请求send方法内部不传数据或者写一个null
        console.log("========main thread=======");
    }

</script>
</html>